// pages/map/map.js
let  QQMapWX = require('../../utils/qqmap-wx-jssdk');
let qqMap =null;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    menuInfo: {},
    title: '名称',
    // 北京的经纬度
    latitude: 39.909088, //纬度
    longitude: 116.397643, //经度
    currentLocation: '', //格式参考路线规划
    markersStatus: false,
    datatlist: {}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getAddress()
  },
  getAddress() {
    wx.showLoading({  // 显示加载中loading效果 
      title: "加载中",
      mask: true  //开启蒙版遮罩
    });
    var that = this;
    qqMap = new QQMapWX({
      key: 'UCNBZ-5HU3Z-YZ6XQ-7OZUZ-CZ7HO-I4BBG' //私人地图测试key
    });
    // 获取当前定位
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          currentLocation: res.latitude.toString() + "," + res.longitude.toString(),
          // latitude: '31.05755',
          // longitude: '121.71916',
          // currentLocation: "31.05755,121.71916",
          markersStatus: true
        });
        // 详细操作查看文档
        // https://lbs.qq.com/service/webService/webServiceGuide/webServiceQuota
        qqMap.reverseGeocoder({
          success: function (res) {
            console.log('-------->', res)
          }
        })
        that.getAround(res.longitude, res.latitude)
        that.setData({
          markersStatus: true
        })
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },
  // 生成周边markers
  getAround(longitude, latitude){
    qqMap.search({
      location:{
        latitude: this.data.latitude,
        longitude: this.data.longitude,
      },
      keyword: '社保',
      success: (res) => {
        console.log("地理位置", res);
        var mark = [];
        for (let i in res.data) {
          mark.push({
              iconPath: '/images/other/locate.png', //周边的图标    根据自己需要换
              alpha: 1,
              title: res.data[i].title,
              id: Number(i),
              longitude: res.data[i].location.lng,
              latitude: res.data[i].location.lat,
              width: parseInt(31.91) + 'px',//设置图标的大小
              height: parseInt(31.91) + 'px',
              callout:{
                display: 'ALWAYS',
                content: res.data[i].title + "\n距离："+res.data[i]._distance+"米",
                bgColor:"#fff",
                padding:"5px",
                borderRadius:"5px",
                borderWidth:"1px",
                borderColor:"#000000",
              },
              // label:{
              //   display: 'ALWAYS', 
              //   content: '距离'+res.data[i]._distance+'米',  //文本
              //   color: '#FF0202',  //文本颜色
              //   borderRadius: 3,  //边框圆角
              //    borderWidth: 1,  //边框宽度
              //   borderColor: '#68c4c7',  //边框颜色
              //    bgColor: '#ffffff',  //背景色
              //    padding: 5,  //文本边缘留白
              //    textAlign: 'center'  //文本对齐方式  left, right, center
              // },
          })
        }
        // mark.push({
        //   iconPath: '../../assets/image/add2.png', //中心的图标     根据自己需要换
        //   id: Number(res.data.length),
        //   alpha: 1,
        //   longitude: longitude,
        //   latitude: latitude,
        //   width: parseInt(43.87) + 'px',
        //   height: parseInt(43.87) + 'px',
        // })
        this.setData({
          datatlist: mark,
        })
        wx.hideLoading();
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        // console.log(res);
      }
    })
  },
  //标记点点击
  markertap(e){
    var that = this
    console.log('被点击了----》', e)
    let marks = this.data.datatlist
    for (let i = 0; i < marks.length; i++) {
      if(marks[i].id == e.markerId){
        console.log(marks[i].longitude, marks[i].latitude)
        that.gotoLocation(marks[i].title,marks[i].latitude.toString(),marks[i].longitude.toString())
        break;
      }
    }
  },


  // 导航
  gotoLocation(goname,lat,lon){
      wx.openLocation({
          type: 'gcj02',
          latitude: Number(lat),
          longitude: Number(lon),
          name: goname,
          scale: 28,
          success: function (data) {
            console.log(data)
          },
          fail(res) {
            console.log(res) // getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json
          },
          complete(){
            wx.hideLoading()
          }
      })
  },
  //回到我的位置
  Backtap(){
    this.onLoad()
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    const top = getApp()
    this.setData({
      menuInfo: top.geibartop.menuInfo
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})